<template>
  <mars-dialog :show="showDialog" title="属性修改" width="400" top="60"  :min-width="297">
    <mars-gui v-if="DataType=='point'" :options="optionsPoint" @change="guiChange"></mars-gui>
    <mars-gui v-if="DataType=='line'" :options="optionsLine" @change="guiChange"></mars-gui>
    <div class="dialog-buttons">
      <mars-button @click="save" style="margin-right: 10px;">保存</mars-button>
      <mars-button @click="cancel">取消</mars-button>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { useWidget } from "@mars/common/store/widget";
import { ref, reactive, onMounted } from "vue";
import { $message } from "@mars/components/mars-ui";
import type { GuiItem } from "@mars/components/mars-ui/mars-gui";
import MarsDialog from "@mars/components/mars-ui/mars-dialog/index.vue";
import MarsGui from "@mars/components/mars-ui/mars-gui/index.vue";
import MarsButton from "@mars/components/mars-ui/mars-button/index.vue";
import axios from "axios"; // 引入axios

let DataType = ref("point")
let showDialog = ref<boolean>(true);
const { currentWidget } = useWidget();
onMounted(() => {
  DataType.value = currentWidget.data.dataType;
  console.log(`当前Widget输出内容:`);
  console.log(DataType);
  showDialog.value = true;
  cleanFormData(DataType.value);
});
let optionsPoint = reactive<GuiItem[]>([
  {
    type: "input",
    field: "物探点号",
    label: "物探点号",
    value: "",
  },
  {
    type: "input",
    field: "X座标",
    label: "X坐标",
    value: "",
  },
  {
    type: "input",
    field: "Y座标",
    label: "Y坐标",
    value: "",
  },
  {
    type: "input",
    field: "地面高程",
    label: "地面高程",
    value: "",
  },
  {
    type: "input",
    field: "管底高程",
    label: "管底高程",
    value: "",
  },
  {
    type: "input",
    field: "管径断面",
    label: "管径断面",
    value: "",
  },
  {
    type: "input",
    field: "管线材料",
    label: "管线材料",
    value: "",
  },
  {
    type: "input",
    field: "特征",
    label: "特征",
    value: "",
  },
  {
    type: "input",
    field: "管顶高程",
    label: "管顶高程",
    value: "",
  },
  {
    type: "input",
    field: "起始点埋深",
    label: "埋深",
    value: "",
  },
  {
    type: "input",
    field: "连接方向",
    label: "连接方向",
    value: "",
  },
  {
    type: "input",
    field: "附属物",
    label: "附属物",
    value: "",
  }
]);
let optionsLine = reactive<GuiItem[]>([
  {
    type: "input",
    field: "物探点号",
    label: "物探点号",
    value: "",
  },
  {
    type: "input",
    field: "起始点X座标",
    label: "起始点X坐标",
    value: "",
  },
  {
    type: "input",
    field: "起始点Y座标",
    label: "起始点Y坐标",
    value: "",
  },
  {
    type: "input",
    field: "起始点高程",
    label: "起始点高程",
    value: "",
  },
  {
    type: "input",
    field: "起始点埋深",
    label: "起始点埋深",
    value: "",
  },
  {
    type: "input",
    field: "终止点X座标",
    label: "终止点X坐标",
    value: "",
  },
  {
    type: "input",
    field: "终止点Y座标",
    label: "终止点Y坐标",
    value: "",
  },
  {
    type: "input",
    field: "终止点高程",
    label: "终止点高程",
    value: "",
  },
  {
    type: "input",
    field: "终止点埋深",
    label: "终止点埋深",
    value: "",
  },
  {
    type: "input",
    field: "管径断面",
    label: "管径断面",
    value: "",
  },
  {
    type: "input",
    field: "管线材料",
    label: "管线材料",
    value: "",
  },
  {
    type: "input",
    field: "特征",
    label: "特征",
    value: "",
  },
  {
    type: "input",
    field: "连接方向",
    label: "连接方向",
    value: "",
  },
  {
    type: "input",
    field: "附属物",
    label: "附属物",
    value: "",
  }
])

// 填充表单数据
function cleanFormData(type) {
    if (DataType.value == "point") {
      optionsPoint.forEach((option) => {
        const value = "";
        option.value = value !== undefined ? value : "";
      });
    }
    else if (DataType.value == "line") {
      optionsLine.forEach((option) => {
        const value = "";
        option.value = value !== undefined ? value : "";
      });
    }
}
function guiChange(data) {
  console.log(data); // data为该gui对象包含的所有数据
}

// 保存表单数据
function save() {
  let TransferData = {};
  if (DataType.value == "point") {
    TransferData = {}
    optionsPoint.forEach((option) => {
      TransferData[option.field] = option.value;
    });
  }
  else if (DataType.value == "line") {
    TransferData = {}
    optionsLine.forEach((option) => {
      TransferData[option.field] = option.value;
    });
  }
  showDialog.value = false
}

// 取消并关闭对话框
function cancel() {
  showDialog.value = false
}


</script>

<style lang="less">
.dialog-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 增加与上面输入框的间距 */
  margin-bottom: 10px;
  gap: 10px; /* 增加两个按钮之间的间距 */
}
</style>
